<script setup>
import storeListItem from "./storeListItem.vue";
import { ref, watch } from "vue";

// 定义props
const props = defineProps({
  storeId: {
    type: Number,
    default: -1,
  },
});

// 定义emits
const emit = defineEmits(["back", "input", "select"]);

// 响应式数据
const value1 = ref(0);
const value2 = ref("a");
const radio = ref(props.storeId);
const option1 = ref([
  { text: "综合排序", value: 0 },
  { text: "评分最高", value: 1 },
  { text: "距离最近", value: 2 },
]);
const option2 = ref([
  { text: "服务筛选", value: "a" },
  { text: "保养", value: "b" },
  { text: "洗车", value: "c" },
  { text: "换胎", value: "d" },
  { text: "美容", value: "e" },
]);
const list = ref([]);
const loading = ref(false);
const finished = ref(false);

// 方法
const onClickLeft = () => {
  emit("back");
};

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  // setTimeout(() => {
  //   for (let i = 0; i < 10; i++) {
  //     list.value.push(list.value.length + 1);
  //   }
  //
  //   // 加载状态结束
  //   loading.value = false;
  //
  //   // 数据全部加载完成
  //   if (list.value.length >= 40) {
  //     finished.value = true;
  //   }
  // }, 1000);
};

const onItemChange = (e) => {
  emit("input", e);
  emit("select");
};

// 监听storeId变化
watch(
  () => props.storeId,
  (newVal) => {
    radio.value = newVal;
  }
);
</script>
<template>
  <div class="selectHome">
    <van-nav-bar class="nav_bar" fixed title="选择服务门店" left-arrow left-text="返回" @click-left="onClickLeft" />
    <div class="select">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
    </div>
    <div class="list">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <van-radio-group v-model="radio" @change="onItemChange">
          <van-radio v-for="item in list" :key="item" :name="item">
            <storeListItem class="select_item"></storeListItem>
          </van-radio>
        </van-radio-group>
      </van-list>
    </div>
  </div>
</template>


<style lang="less" scoped>
.selectHome {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg") no-repeat;
  background-size: contain;
  //   background-attachment: fixed;
  background-position: top center;
  box-sizing: border-box;
  padding: 130px 50px 150px 50px;
  position: relative;

  .nav_bar {
    background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg") no-repeat;
    background-size: contain;
    background-attachment: fixed;
    background-position: top;

    :deep(.van-nav-bar__title) {
      color: #fff;
      font-weight: bold;
    }

    :deep(.van-nav-bar__text) {
      color: #fff;
      margin-left: 20px;
      font-size: 52px;
    }

    :deep(.van-icon) {
      font-size: 50px;
      font-weight: bold;
      color: #fff;
    }
  }

  :deep(.van-hairline--bottom::after) {
    border: unset;
  }

  .select {
    margin: 60px 0;

    :deep(.van-dropdown-menu__bar) {
      background: rgba(255, 255, 255, 0.3);

      .van-dropdown-menu__title {
        color: #fff;
      }
    }

    :deep(.van-popup--top) {
      width: 92%;
      left: 50px;
      right: 50px;
    }
  }

  .list {
    :deep(.van-radio) {
      background: #fff;
      margin-bottom: 20px;
      padding-left: 15px;
      border-radius: 30px;

      .select_item {
        padding: 40px 0 0 0;
      }
    }
  }
}
</style>
